@font-face {
  font-family: "YDdict-Icon";
  src: url("fonts/YDdict-Icon-font.eot");
  src: url("fonts/YDdict-Icon-font.svg") format("svg"),
       url("fonts/YDdict-Icon-font.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@keyframes slide-down {
  from {
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}

@-webkit-keyframes slide-down {
  from {
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes slide-up {
  from {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
  }
}

@-webkit-keyframes slide-up {
  from {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
  }
}

body {
  margin: 0.5em;
  padding: 0;
  width: 300px;
  background-color: #faf8ef;
  color: #776e65;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.input-container{
  position: relative;
  margin: 0;
  border: 1px solid #dbd8e4;
  box-shadow: -0.2px -0.2px 0.2px 0.2px ;
  border-radius: 3px;
}

.input-container:after {
  content: "";
  display: block;
  clear: both;
}

.input-area {
  display: block;
  padding: 2px;
  border: none;
  font-size: 1.3em;
  width: 270px;
  margin: 1px 0 0 20px;
  border-radius: 3px;
}

.input-area:focus {
  outline: none;
}

.query-button {
  display: block;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  border: 0;
  border-radius: 1px; 
  margin: 0;
  padding: 4px;
  background-color: transparent;
  line-height: 19px;
  color: rgba(0, 0, 0, 0.2);
  
}

.query-button:focus {
  outline-color: transparent;
}

.query-button:hover {
  color: rgba(0, 0, 0, 1); 
}

.query-button:active {
  color: rgba(235, 0, 0, 1);
}

.query-button::after {
  content: '\E800';
  -webkit-transition: color 0.2s linear;
  transition: color 0.2s linear;
  font-size: 0.8em;
  font-family: "YDdict-Icon";
}



/*Result Block*/
.result-container {
  margin-top: 10px;
  padding: 4px;
}

.unshow {
  display: none;
}

/*Result Block -- title contaniner*/
.title-container {
  margin-left: 10px;
  display: flex;
  min-width: 50%;
  max-width: 100%;
  font-size: 22px;
}

.title-container.long-text {
  font-size: 16px;
}

.title-container .title-phonetic {
  display: none;
}

.title-container .title-word {
  position: relative;
  max-width: 50%;
  text-align: left;
}

.title-container .title-word .voice-container {
  display: inline-block;
  margin-left: 10px;
  
}

.title-container .title-word .voice-container::after {
  content: '\E804';
  font-family: "YDdict-Icon";
  font-size: 70%;
}

.title-container .title-translation {
  flex:1;
  margin-left: 10px;
  text-align: justify;
  max-width: 50%;
}


/*Result Block -- basic container*/
.basic-container {
  margin-top: 10px;
}

/*Result Block -- basic container -- phonetic container*/
.phonetic-container {
  margin-left: 10px;
  font-size: 1em;
}

.uk-phonetic-container::before {
  content: "英 ";
  color: #776e65;
}

.us-phonetic-container::before {
  content: "美 ";
  color: #776e65;
}

.uk-phonetic-container, .us-phonetic-container {
  display: inline-block;
  margin-right: 10px;
  color: red;
}

.voice-container {
  cursor: pointer;
  display: inline-block;
  margin-left: 10px;
  color: rgba(119, 110, 101, 0.2);
} 

.voice-container::after {
  content: '\E803';
  font-family: "YDdict-Icon";
  
  -webkit-transition: color 0.2s linear;
  transition : color 0.2s linear;
}  

.voice-container:hover {
  color: rgba(119, 110, 101, 1);
}


/*Result Block -- basic container -- explains container*/
.explains-container {
  font-size: 14px;
  margin-top: 10px;
}

.explains-list {
  border: 1px solid #F0EFF0;
  border-radius: 1px;
  padding: 10px;
}

.explains-list li {
  margin-bottom: 5px;
}

.property-container {
  margin-right: 5px;  
}

/*Result Block -- web explains container*/
.web-explains-container {
  font-size: 14px;
  margin-top: 20px;
  position: relative;
}

.web-title {
  position: absolute;
  top: -5px;
  left: 10px;
  background-color: #faf8ef;
  font-weight: bold;
}

.web-title::before {
  content: '\E802';
  font-family: "YDdict-Icon";
  margin-right: 5px;
  color: #ccbb1e;
}

.web-explains-list {
  border: 1px solid #F0EFF0;
  border-radius: 1px;
  padding: 10px;
  padding-top: 20px;
}

.web-explains-list li {
  margin-bottom: 5px;
}

.web-explains-list li .web-key {
  font-weight: bold;
}

.web-explains-list li .web-value {
  margin-left: 5px;
}

.tips-container {
  position: relative;
  padding: 5px;
  font-size: 0.4em;
  color: rgba(0, 0, 0, 0.4);
}

.tips-container p {
  margin: 0;
  margin-top: 5px;
  padding: 0;
}

.tips-container .link {
  color: rgba(0, 161, 194, 1);
  cursor: pointer; 
  -webkit-transition: color 0.2s linear;
  transition : color 0.2s linear;
}

#turn-off-tips {
  position: absolute;
  right: 5px;
  bottom: 5px;
  cursor: pointer;
  text-decoration: underline;
}

footer {
  font-size: 0.3em;
  text-align: center;
  position: relative;
  color: rgba(0, 0, 0, 0.2);
}

footer img {
  position: relative;
  top:4px;
  width: 50px;
  opacity: 0.6;
}

.contact-info {
  font-size: 0.3em;
  font-family: "YDdict-Icon";
  position: absolute;
  bottom:0;
  right: 0;
}

.link {
  cursor: pointer;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.6);
  opacity: 0.5;
}

.link:hover {
  color: rgba(0, 0, 0, 1);
}

#score::after {
  content: '\E80B';
  -webkit-transition: color 0.2s linear;
  transition: color 0.2s linear;
}

#email::after {
  content: '\E806';
  -webkit-transition: color 0.2s linear;
  transition : color 0.2s linear;
}

#issue::after {
  content: '\E805';

  -webkit-transition: color 0.2s linear;
  transition : color 0.2s linear;
}

#source::after {
  content: '\E807';

  -webkit-transition: color 0.2s linear;
  transition : color 0.2s linear;
}

.setting-button {
  position: absolute;
  bottom:0;
  left: 0;
  cursor: pointer;
  font-size: 0.3em;
  font-family: "YDdict-Icon";
}

.setting-button-clicked {
  color: #000000;
}

.setting-button::after {
  content: "\E80A"; 
  -webkit-transition: color 0.2s linear;
  transition : color 0.2s linear; 
}

.setting-block {
  margin: 5px 0;
  text-align: justify;
  border: 0px solid #F0EFF0;
  border-radius: 1px;
  background-color: #f2ecd4;
  max-height: 0;
  height: 0;
  overflow-y: hidden;
  color: #6e665e;
  transition: all .5s cubic-bezier(0, 1, 0.5, 1);
  -webkit-transition: all .5s cubic-bezier(0, 1, 0.5, 1);
}

.active {
  border: 1px solid #F0EFF0;
  max-height: 800px;
}

.setting-slide-up {
  animation: fade-out 0.4s ease forwards;
  -webkit-animation: fade-out 0.4s ease forwards;
}

.setting-slide-down {
  display: block;
  animation: fade-in 0.4s ease forwards;
  -webkit-animation: fade-in 0.4s ease forwards;
}

.setting-block div {
  margin-top: 5px;
  padding: 1px 10px;
}

.setting-block .top-menu {
  margin-bottom: 5px;
}

.setting-block .sub-menu {
  margin-top: 5px;
}

.setting-block .link-query {
  margin-left: 5px;
}

.setting-block .help {
  font-size: 12px;
  cursor: help;
}

.setting-block label {
  margin-left: 5px;
}

.setting-block label.unactive {
  color: rgba(0, 0, 0, 0.5);
}

.setting-block input {
  margin: 0;
}

.setting-block .sub-title {
  margin-left: 17px;
  font-size: 90%;
}

.setting-block .sub-button {
  margin-left: 5px;
}

.setting-block .sub-label{
  font-size: 90%;
}

#currentDuration {
  display: inline-block;
  width: 14px;
  text-align: center;
}

input[type="range"] {
  width: 100px;
  position: relative;
  top:3px;
}

#save {
  position: absolute;
  top: 0;
  right: 0;
}

#cancel {
  position: absolute;
  top: 25px;
  right: 0;
}

hr.carved {
  clear: both; 
  float: none; 
  width: 100%; 
  height: 2px;
  line-height: 2px;
  font-size: 0;
  margin: 1.4em 0;
  border: none 0; 
  background: #ddd;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.5, rgb(221,221,221)),color-stop(0.5, rgb(255,255,255)));
  background-image: -webkit-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
  background-image: -o-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
  background-image: -moz-linear-gradient(center top,rgb(221,221,221) 50%,rgb(255,255,255) 50%);
}